<template>
    <div>
        <!-- 自定义表单 -->
        <el-form :model="state.form" ref="form" :rules="prop.rules" :label-width="labelWidth">
            <template v-for="(item, index) in prop.itemForm" :key="index">
                <template v-if="item.slotName">
                    <slot :name="item.slotName"></slot>
                </template>
                <template v-else>
                    <el-form-item :label="item.label" :prop="item.prop">
                        <!-- 输入框 -->
                        <el-input v-if="item.type === 'input'" v-model="state.form[item.modelValue!]" :placeholder="item.placeholder" :type="item.inputType" />
                        <!-- 下拉框 -->
                        <el-select v-if="item.type === 'select'" v-model="state.form[item.modelValue!]" style="width: 100%" :placeholder="item.placeholder">
                            <el-option v-for="items in item.options" :key="items.value" :label="items.label" :value="items.value" />
                        </el-select>
                        <!-- 单选框 -->
                        <el-radio-group v-if="item.type === 'radioGroup'" v-model="state.form[item.modelValue!]">
                            <el-radio v-for="items in item.radioList" :label="items.label">{{ items.value }}</el-radio>
                        </el-radio-group>
                        <!-- 多选框 -->
                        <el-checkbox-group v-if="item.type === 'checkboxGroup'" v-model="state.form[item.modelValue!]">
                            <el-checkbox v-for="items in item.checkboxList" :key="items.label" :label="items.label">
                                {{ items.value }}
                            </el-checkbox>
                        </el-checkbox-group>
                        <!-- 滑块 -->
                        <el-switch v-if="item.type === 'switch'" v-model="state.form[item.modelValue!]" />
                        <!-- 日期时间选择器 -->
                        <el-date-picker
                            v-if="item.type === 'datePicker'"
                            v-model="state.form[item.modelValue!]"
                            :type="item.pickerType"
                            :start-placeholder="item.startPlace ? item.startPlace : ''"
                            :end-placeholder="item.endPlace ? item.endPlace : ''"
                            :placeholder="item.placeholder"
                            :value-format="item.valueFormat"
                        />
                        <!-- 时间选择器-->
                        <el-time-picker
                            v-if="item.type === 'timePicker'"
                            v-model="state.form[item.modelValue!]"
                            :placeholder="item.placeholder"
                            :is-range="item.isRange"
                            :start-placeholder="item.startPlace ? item.startPlace : ''"
                            :end-placeholder="item.endPlace ? item.endPlace : ''"
                        />
                    </el-form-item>
                </template>
            </template>
            <el-form-item class="footer-button">
                <el-button @click="formCancel">取消</el-button>
                <el-button type="primary" @click="submit(form)">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, watch, nextTick } from 'vue';
import type { FormRules, FormInstance } from 'element-plus';
import { fromType } from '@/interface';
const form = ref<FormInstance>();
/**
 *  - 表单需要传入的表单项
 *   - itemForm - 表单项内容
 *   - rules 表单检验规则
 *   - labelWidth 表单label宽度
 *   - form - 表单值
 */

interface propstype {
    itemForm: fromType[];
    rules?: FormRules;
    labelWidth?: string;
    form?: any;
}

interface stateType {
    form: any;
}

const prop = withDefaults(defineProps<propstype>(), {
    itemForm: () => [],
    labelWidth: '80px'
});

const emit = defineEmits<{
    (e: 'submitFormData', data: object): void;
    (e: 'cancelFormData'): void;
}>();

const state: stateType = reactive({
    form: {}
});

// 提交
const submit = (form: FormInstance | undefined) => {
    if (!form) return;
    form.validate(async valid => {
        if (valid) {
            emit('submitFormData', state.form);
            state.form = {};
        }
    });
};

// 取消按钮
const formCancel = () => {
    emit('cancelFormData');
    state.form = {};
};

// 监听修改时的form传入值
watch(
    () => prop.form,
    (val: any) => {
        state.form = { ...val };
    },
    {
        immediate: true
    }
);
</script>
<style lang="scss" scoped></style>
